<template>
<div class="box-wraper">
    <el-card class="box-card">
  <div slot="header" style="text-align:center" >
    <span style="font-size:large; font-weight: bold; " >塔大疫情防控管理系统</span>
  </div>
  <div class="textitem"  >
      
      <div >
      <el-input  style="width:290px" prefix-icon="el-icon-user" v-model="ruleForm.username" autocomplete="off"></el-input>
    
  </div>
  <div class="xia">
    
      
      <el-input  style="width:290px"  prefix-icon="el-icon-lock" show-password v-model="ruleForm.password" autocomplete="off" @keyup.enter.native="login"></el-input>
   
    </div>
    
  
      <div class="anniu" >
      <el-button  type="primary" @click="login" class="left"  >登录</el-button>
   
   
      <el-button type="success" @click="dialogTableVisible = true" class="right">注册</el-button>
   
    
    </div>
  </div>

  <el-dialog title="注册用户" style="width:60%;height: 100%; font-size: large;font-weight: bold;" :visible.sync="dialogTableVisible" append-to-body="true" center >
                     <div class="tankuang">
                      <div>
                        <el-row>
                            <el-input v-model="username2" autocomplete="off" placeholder="昵称" style="width:350px"></el-input>
                          </el-row>
                          </div>
                       <div style="margin-top:15px">
                        <el-row>
                            <el-input v-model="password2" autocomplete="off"  placeholder="密码" style="width:350px"></el-input>
                          </el-row>
                          </div>
                        
                         <div  style="margin-top:15px">
                       <el-row>
                            <el-input v-model="phone" autocomplete="off"  placeholder="电话" style="width:350px"></el-input>
                          </el-row>
                          </div>
                          <div style="margin-top:15px">
                        <el-button class="btn" type="primary" @click="queding" style="width:350px">立即注册</el-button>
                      </div>
                     </div>
                  
                   

                </el-dialog>
    </el-card>
</div>
</template>
<script>
  export default{
       data(){
           return {
            ruleForm: {
              username:'',
              password:'',
              name:''
              
          
        },
      
            
             username2:'',
             roleid:'2',
             password2:'',
             email:'',
             phone:'',
             avatar:'1',
             dialogTableVisible: false,
             check:true,
             rules:{
        username:[{required:true,message:'请输入用户名',tigger:'blur'}],
        password:[{required:true,message:'请输入密码',tigger:'blur'}],
        
      }

           }
       },
      
       methods:{
              login(){
           
            fetch("http://1.15.134.100:9999/user/login",{
              method:"POST",
              headers : {
                  'Content-type':'application/json'
              },
              body:JSON.stringify({
                  userName :this.ruleForm.username,
                  password :this.ruleForm.password,
              })
               
              
          }).then(response=>response.json()) 
          
          .then(data =>{
             console.log(data)
                localStorage.setItem("token",data.data.token);
                localStorage.setItem("xx",data.msg)
                this.$router.push({path: '/main'});
                sessionStorage.setItem("user",data.data.用户名)
                
              
              
          });
              },
              queding(){
              fetch("http://1.15.134.100:9999/user/logon?userName="+this.username2+"&password="+this.password2+"&email="+this.email+"&phonenumber="+this.phone+"&avatar="+this.avatar,{
                method:"POST",
                headers:{
                  'Content-type':'application/json'
                },
              
              }).then(response=>response.json())
              .then(data=>{
                console.log(data);
                    alert("注册成功");
                    this.insertRoleId();
                    this.$router.go(0);
              })
              },
              insertRoleId(){
                fetch("http://1.15.134.100:9999/user/logon2?roleid="+this.roleid,{
                method:"POST",
                headers:{
                  'Content-type':'application/json'
                },
              
              }).then(response=>response.json())
              .then(data=>{
                console.log(data);
                   
              })
              },
        
              
       }
      }
</script>



<style scoped>
.box-card{
    margin-left: 330px;
    width: 400px;
    margin-top: 260px;
    background-color: rgba(255, 255, 255, 0.3);
}

.butter{
  display: flex;
  
  
}

.box-wraper{
  
    height: 100%;
    width: 100%;
    background-image: url(../assets/壁纸2.webp);
    background-size: cover;
	position: absolute;
	
	background-repeat: no-repeat;


}
.el-Form{
  display: flex;
  justify-content: center;


}
.el-dialog__wrapper{
  margin: auto;
  margin-top: 100px;
 
}

.tankuang{
  margin-left: 30px;
}
.btn{
  width: 260px;
}
.left{
  width: 140px;
}
.right{
  width: 140px;
}
.clearfix{
  margin: auto;
  
}
.box-card{
  height: 250px;
 
}
.butter{
  margin-left: 55px;
}
.xia{
  margin-top: 15px ;
}
.anniu{
  margin-top: 14px;
}
@media screen{
  box-wraper{
    width: 50px;
    height: 50px;
  }
}
</style>